<div class="resp-tabs-container" id="blog">
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.profile">
        <i class="hi-icon fa fa-user icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">profile</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.resume">
        <i class="hi-icon fa fa-user icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">resume</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.portfolio">
        <i class="hi-icon fa fa-briefcase icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">  PORTFOLIO</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a resp-tab-active" role="tab" aria-controls="tab_item-0">
        <i class="hi-icon fa fa-bullhorn icon_menu icon_menu_active"></i>
        <span class="tite-list-resp"> blog</span>
        <i class="glyphicon glyphicon-chevron-up arrow-tabs"></i>
    </h2>
    <div class="main_content">
        <div class="content">
            <h1>Blog - My Blog</h1>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <section id="blog-page">
                        <div  ng-repeat="item in $ctrl.data">
                            <div class="blog-article">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12 post_media">
                                        <div class="post-format-icon">
                                            <a href="#"><span class="fa fa-picture-o"></span></a>
                                        </div>
                                        <div class="media" ng-show="item.media == 'carousel'">
                                            <div uib-carousel active="$ctrl.active" interval="$ctrl.myInterval" no-wrap="$ctrl.noWrapSlides" class="angularCarousel">
                                                <div uib-slide ng-repeat="slide in $ctrl.slides track by slide.id" index="slide.id">
                                                    <img ng-src="{{slide.image}}" style="margin:auto;">
                                                    <div class="carousel-caption">
                                                        <h4>{{slide.title}}</h4>
                                                        <p>{{slide.text}}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="media" ng-show="item.media == 'image'">
                                            <div>
                                                <img src="./images/blog/blog-4.jpg" style="margin:auto;" class="img-hover">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                <div class="col-md-12 post_content">
                                    <div class="content">
                                        <div class="title_content post_format_standart">
                                            <div class="text_content">{{item.title}}</div>
                                            <div class="clear"></div>
                                        </div>
                                        <ul class="info">
                                            <li><i class="glyphicon glyphicon-comment"></i> {{item.count}}Comments</li>
                                            <li><i class="glyphicon glyphicon-time"></i> {{item.date}}</li>
                                            <li><i class="glyphicon glyphicon-user"></i> by {{item.author}}</li>
                                            <li><i class="glyphicon glyphicon-tag"></i> {{item.label}}</li>
                                        </ul>
                                        <div class="blog-content">
                                            <p>
                                                <i class="fa fa-quote-left"></i>
                                                {{item.article}}
                                            </p>
                                        </div>
                                    </div>
                                    <a ui-sref="main.article({id:item.id,media:item.media})" class="read_m pull-right">Read More <i class="glyphicon glyphicon-chevron-right"></i></a>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                        </div>
                        <!--<div class="blog-article">-->
                            <!--<div class="col-md-12">-->
                                <!--<div class="row">-->
                                    <!--<div class="col-md-12 post_media">-->
                                        <!--<div class="post-format-icon">-->
                                            <!--<a href="#"><span class="fa fa-picture-o"></span></a>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                                <!--<div class="row">-->
                                    <!--<div class="col-md-12 post_content">-->
                                        <!--<div class="content">-->
                                            <!--<div class="title_content post_format_standart">-->
                                                <!--<div class="text_content">BLOG POST GALLERY</div>-->
                                                <!--<div class="clear"></div>-->
                                            <!--</div>-->
                                            <!--<ul class="info">-->
                                                <!--<li><i class="glyphicon glyphicon-comment"></i> 2 Comments</li>-->
                                                <!--<li><i class="glyphicon glyphicon-time"></i> January 31, 2014</li>-->
                                                <!--<li><i class="glyphicon glyphicon-user"></i> by Jane Doe</li>-->
                                                <!--<li><i class="glyphicon glyphicon-tag"></i> php, web design</li>-->
                                            <!--</ul>-->
                                            <!--<div class="blog-content">-->
                                                <!--<p>-->
                                                    <!--<i class="fa fa-quote-left"></i>-->
                                                    <!--{{item.article}}-->
                                                <!--</p>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                        <!--<a ui-sref="main.articleSecond" class="read_m pull-right">Read More <i class="glyphicon glyphicon-chevron-right"></i></a>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="clear"></div>-->
                        <!--<div class="blog-article">-->
                            <!--<div class="col-md-12">-->
                                <!--<div class="row">-->
                                    <!--<div class="col-md-12 post_media">-->
                                        <!--<div class="post-format-icon">-->
                                            <!--<a href="#"><span class="fa fa-picture-o"></span></a>-->
                                        <!--</div>-->
                                        <!--<div class="media">-->
                                            <!--<div>-->
                                                    <!--<img src="./images/blog/blog-4.jpg" style="margin:auto;" class="img-hover">-->
                                            <!--</div>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                                <!--<div class="row">-->
                                    <!--<div class="col-md-12 post_content">-->
                                        <!--<div class="content">-->
                                            <!--<div class="title_content post_format_standart">-->
                                                <!--<div class="text_content">BLOG POST IMAGE</div>-->
                                                <!--<div class="clear"></div>-->
                                            <!--</div>-->
                                            <!--<ul class="info">-->
                                                <!--<li><i class="glyphicon glyphicon-comment"></i> 2 Comments</li>-->
                                                <!--<li><i class="glyphicon glyphicon-time"></i> January 31, 2014</li>-->
                                                <!--<li><i class="glyphicon glyphicon-user"></i> by Jane Doe</li>-->
                                                <!--<li><i class="glyphicon glyphicon-tag"></i> php, web design</li>-->
                                            <!--</ul>-->
                                            <!--<div class="blog-content">-->
                                                <!--<p>-->
                                                    <!--<i class="fa fa-quote-left"></i>-->
                                                    <!--Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo-->
                                                    <!--ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis-->
                                                    <!--parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,-->
                                                    <!--pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,-->
                                                    <!--fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo...-->
                                                <!--</p>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                        <!--<a ui-sref="main.articleThird" class="read_m pull-right">Read More <i class="glyphicon glyphicon-chevron-right"></i></a>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    </section>
                </div>
            </div>
        </div>
    </div>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.contact">
        <i class="hi-icon fa fa-envelope icon_menu"></i>
        <span class="tite-list-resp"> contact </span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>

</div>